<template>
  <view class="">
    <view class="top-container">
      <view class="left">
        <u-avatar size="100" :src="vuex_user.HeadPic"></u-avatar>
        <view class="info">
          <text class="name">{{ vuex_user.Name }}</text>
          <view class="status">
            <!-- <u-badge :isDot="true" type="success"></u-badge> -->
            <text class="label-name">{{ vuex_user.HierarchyName }}</text>
          </view>
        </view>
      </view>

      <view class="right"><image @tap="logout" src="../../static/images/home/layout.png"></image></view>
    </view>

    <view
      class="count-grid"
      @tap="
        $u.route({
          url: '/pages/home/dealer/index'
        })
      "
    >
      <view class="count-item">
        <u-image
          class="img"
          :showLoading="true"
          src="../../static/images/home/count-1.png"
          :width="70"
          :height="60"
        ></u-image>
        <text class="label">一级经销商总数</text>
        <text class="label-count">{{ homeState.FirstDealerCount }}</text>
      </view>
      <view class="count-item">
        <u-image :showLoading="true" src="../../static/images/home/count-2.png" :width="70" :height="60"></u-image>
        <text class="label">二级经销商总数</text>
        <text class="label-count">{{ homeState.DoubleDealerCount }}</text>
      </view>
      <view class="count-item">
        <u-image :showLoading="true" src="../../static/images/home/count-3.png" :width="70" :height="60"></u-image>
        <text class="label">门店总数</text>
        <text class="label-count">{{ homeState.DoorDealerCount }}</text>
      </view>
    </view>

    <view class="content-grid">
      <view
        class="count-item"
        style="position: relative;"
        @tap="toFunctionListPage(item)"
        v-for="(item, index) in homeState.Logo_Icon_Center_List.filter(item => item.IsShowHide > 0)"
        :key="index"
      >
        <u-badge
          v-if="item.CustomNo == 5 || item.CustomNo == 6"
          type="warning"
          :offset="[10, 40]"
          :count="item.CustomNo == 5 ? reviewCount : acceptanceCount"
        ></u-badge>
        <view class="u-flex-col u-col-center">
          <u-image class="img" :showLoading="true" :src="item.PhotoUrl" :width="70" :height="60"></u-image>
          <text class="label">{{ item.Name }}</text>
        </view>
      </view>
    </view>

    <view class="use-container">
      <text class="title">常用功能</text>
      <view class="use-grid">
        <view
          @tap="pageJump(item)"
          class="grid-item"
          v-for="(item, index) in homeState.Logo_Icon_Bottom_List.filter(item => item.IsShowHide > 0)"
          :key="index"
        >
          <u-image class="img" :showLoading="true" :src="item.PhotoUrl" :width="64" :height="64"></u-image>
          <text class="label u-line-1 ">{{ item.Name }}</text>
        </view>
        <view class="grid-item">
          <u-image
            @click="toFunctionListPage(null, 'add')"
            class="img"
            :showLoading="true"
            src="../../static/images/home/use-5.png"
            :width="64"
            :height="64"
          ></u-image>
        </view>
      </view>
    </view>

    <view class="safe-area-inset-bottom"><u-tabbar :list="vuex_tabbar" active-color="#ff7624"></u-tabbar></view>

    <u-modal
      title="申请"
      width="90%"
      :showLoading="false"
      :mask-close-able="true"
      v-model="showApplyModal"
      cancel-text="取消"
      :show-cancel-button="true"
      @confirm="toApplyPage"
      :async-close="true"
      confirm-text="确定"
      :negative-top="100"
    >
      <!-- <apply-search ref="applySearch" :storeRequired="storeRequired" :showDouble="showApplyDouble" :showStore="showApplyStore"></apply-search> -->
      <u-form label-position="top" :label-width="200" style="padding: 0rpx 40rpx;">
        <u-form-item label="">
          <u-radio-group v-model="designApplyType">
            <u-radio name="1">经销商</u-radio>
            <u-radio name="4">其他设计</u-radio>
            <u-radio name="6">旗舰店设计</u-radio>
            <u-radio name="7">非旗舰店设计</u-radio>
          </u-radio-group>
        </u-form-item>

        <block v-if="designApplyType != 4">
          <u-form-item label="一级经销商" required>
            <u-input
              :value="FirstDealer && FirstDealer.label"
              inputAlign="left"
              type="select"
              :selectOpen="showFirstDealerPicker"
              @tap="showFirstDealerPicker = true"
            ></u-input>
          </u-form-item>
          <u-form-item v-if="showApplyDouble || showApplyStore" label="二级经销商">
            <u-input
              :value="DoubleDealer && DoubleDealer.label"
              inputAlign="left"
              type="select"
              :selectOpen="showDoubleDealerPicker"
              @tap="showDoubleDealerPicker = true"
            ></u-input>
          </u-form-item>
          <u-form-item v-if="showApplyStore" label="门店" :required="storeRequired">
            <u-input
              :value="StoreDealer && StoreDealer.label"
              inputAlign="left"
              type="select"
              :selectOpen="showStoreDealerPicker"
              @tap="showStoreDealerPicker = true"
            ></u-input>
          </u-form-item>
        </block>
      </u-form>
    </u-modal>

    <u-select
      @confirm="onPickerChange($event, 1)"
      :default-value="[FirstDealerIndex]"
      v-model="showFirstDealerPicker"
      :list="FirstDealerList"
      label-name="Value"
      value-name="Key"
      safe-area-inset-bottom
    ></u-select>
    <u-select
      v-if="showApplyDouble || showApplyStore"
      @confirm="onPickerChange($event, 2)"
      :default-value="[DoubleDealerIndex]"
      v-model="showDoubleDealerPicker"
      :list="DoubleDealerList"
      label-name="Value"
      value-name="Key"
      safe-area-inset-bottom
    ></u-select>
    <u-select
      v-if="showApplyStore"
      @confirm="onPickerChange($event, 3)"
      :default-value="[StoreDealerIndex]"
      v-model="showStoreDealerPicker"
      :list="StoreDealerList"
      label-name="Value"
      value-name="Key"
      safe-area-inset-bottom
    ></u-select>
  </view>
</template>

<script>
import { pageJumpMixin } from '../../common/pageJump.mixin.js';
export default {
  components: {},
  mixins: [pageJumpMixin],
  data() {
    return {
      homeState: {
        PhotoList: [],
        FirstDealerCount: 0,
        DoubleDealerCount: 0,
        DoorDealerCount: 0,
        Logo_Icon_Center_List: [],
        Logo_Icon_Bottom_List: []
      },
      customStyle: {
        padding: '30rpx 10rpx 0 10rpx'
      },

      showApplyModal: false,
      showApplyDouble: true,
      showApplyStore: true,
      applyType: '',

      showFirstDealerPicker: false,
      showDoubleDealerPicker: false,
      showStoreDealerPicker: false,

      FirstDealerList: [],
      FirstDealerIndex: -1,
      FirstDealer: {},

      DoubleDealerList: [],
      DoubleDealerIndex: -1,
      DoubleDealer: {},

      StoreDealerList: [],
      StoreDealerIndex: -1,
      StoreDealer: {},

      storeRequired: true,

      tabbarList: [
        {
          iconPath: 'home',
          selectedIconPath: 'home-fill',
          text: '首页',
          isDot: false,
          customIcon: false,
          pagePath: '/pages/home/home'
        },
        {
          iconPath: 'grid',
          selectedIconPath: 'grid-fill',
          pagePath: '/pages/review/index',
          text: '审核',
          customIcon: false,
          isDot: true
        },
        {
          iconPath: 'account',
          selectedIconPath: 'account-fill',
          pagePath: '/pages/personal/index',
          text: '个人中心',
          count: 0,
          isDot: false,
          customIcon: false
        }
      ],

      reviewCount: 0,
      acceptanceCount: 0,

      designApplyType: 1,
      showDesignApplyTypeRadio: false,

      params: {
        FirstDealerId: null,
        DoubleDealerId: null,
        StoreDealerId: null,
        ApplyForType: 1
      }
    };
  },

  onLoad(options) {
    let vuex_user = this.vuex_user;
    if (options.OpenId) {
      vuex_user.OpenId = options.OpenId;
    }
    if (options.HeadPic) {
      vuex_user.HeadPic = options.HeadPic;
    }
    this.$u.vuex('vuex_user', vuex_user);

    this.getFirstDealerList();

    uni.setNavigationBarTitle({
      title: '温暖改造家'
    });
  },

  onShow() {
    this.getHomeData();

    Promise.all([this.getDotCount(999), this.getDotCount(1000)]).then(res => {
      console.log(res);

      const [{ Count: reviewCount }, { Count: acceptanceCount }] = res;
      console.log(reviewCount);
      console.log(acceptanceCount);

      // if (reviewCount + acceptanceCount == 0) {
      // 	this.$u.vuex('vuex_tabbar', [
      // 		{
      // 			iconPath: 'home',
      // 			selectedIconPath: 'home-fill',
      // 			text: '首页',
      // 			isDot: false,
      // 			customIcon: false,
      // 			pagePath: '/pages/home/home'
      // 		},
      // 		{
      // 			iconPath: 'account',
      // 			selectedIconPath: 'account-fill',
      // 			pagePath: '/pages/personal/index',
      // 			text: '个人中心',
      // 			count: 0,
      // 			isDot: false,
      // 			customIcon: false
      // 		}
      // 	]);
      // 	return false;
      // }else {
      // 	this.$u.vuex('vuex_tabbar', this.tabbarList);
      this.reviewCount = reviewCount;
      this.acceptanceCount = acceptanceCount;
      this.vuex_tabbar[1].isDot = false;
      this.vuex_tabbar[1].count = reviewCount + acceptanceCount;
      // }
    });
    // this.getDotCount(999).then(res => {
    // 	const {ResultCode, Count} = res;
    // 	if(ResultCode == 1) {
    // 		this.reviewCount = Count
    // 	}
    // })

    // this.getDotCount(1000).then(res => {
    // 	const {ResultCode, Count} = res;
    // 	if(ResultCode == 1) {
    // 		this.acceptanceCount = Count
    // 	}
    // })
  },

  methods: {
    logout() {
      let me = this;
      uni.showModal({
        title: '是否确定退出?',
        confirmText: '退出',
        success(e) {
          if (e.confirm) {
            me.$u.vuex('vuex_user', '');
            uni.reLaunch({
              url: '/pages/login/index'
            });
          }
        }
      });
    },

    getDotCount(temId) {
      return this.$u.api.getRedDotCount({
        TemId: temId
      });
    },

    toFunctionListPage(item, type) {
      if (item) {
        if (item.CustomNo == 34) {
          this.$u.route('/pages/marketCosts/market/index');
          return false;
        }

        if (item.CustomNo == 35) {
          this.$u.route('/pages/marketCosts/bu/index');
          return false;
        }

        if (item.CustomNo == 36) {
          this.$u.route('/pages/marketCosts/sales/predictionList');
          return false;
        }

        if (item.CustomNo == 37) {
          this.$u.route('/pages/marketCosts/sales/predictionReviewList');
          return false;
        }
      }

      if (item && (item.CustomNo == 5 || item.CustomNo == 6)) {
        this.$u.vuex('vuex_temId', item.CustomNo == 5 ? 999 : 1000);
        uni.switchTab({
          url: '/pages/review/index'
        });
        return false;
      }

      this.$u.route({
        url: '/pages/home/functions',
        params: {
          level: 3,
          parentId: type == 'add' ? '2,3,4,5,6' : item.CustomNo,
          type,
          title: type == 'add' ? '添加常用功能' : item.Name,
          commonFunctions: type == 'add' ? this.homeState.Logo_Icon_Bottom_List.map(item => item.Id).toString() : null
        }
      });
    },

    switchPage(item) {
      if (item.Id == 3) {
        this.apply('information');
      } else if (item.Id == 2) {
        this.$u.route('/pages/home/dealer/index');
      }
    },

    getHomeData() {
      this.$u.api.getHomeData().then(res => {
        console.log(res);
        const {
          ResultCode,
          DoorDealerCount,
          DoubleDealerCount,
          FirstDealerCount,
          PhotoList,
          Logo_Icon_Botton_List,
          Logo_Icon_Center_List
        } = res;

        this.homeState.PhotoList = PhotoList.map(item => {
          return {
            image: this.$getImageUrl(item.Value),
            title: item.Key
          };
        });
        this.homeState.FirstDealerCount = FirstDealerCount;
        this.homeState.DoubleDealerCount = DoubleDealerCount;
        this.homeState.DoorDealerCount = DoorDealerCount;
        this.homeState.Logo_Icon_Bottom_List = Logo_Icon_Botton_List;
        this.homeState.Logo_Icon_Center_List = Logo_Icon_Center_List;
      });
    },

    checkModuleApplyIsOk(dealerId, selectType) {
      return new Promise((reslove, reject) => {
        this.$u.api
          .moduleApplyCheck({
            SelectType: selectType,
            DealerId: dealerId
          })
          .then(res => {
            const { ResultCode } = res;
            if (ResultCode === 1) {
              reslove(true);
            }
          });
      });
    },

    onPickerChange(e, level) {
      let dealerList = [];
      let dealer = {};
      let dealerIndex = -1;
      if (level == 1) {
        dealerList = this.FirstDealerList;
        dealer = this.FirstDealer;
        dealerIndex = this.FirstDealerIndex;
      } else if (level == 2) {
        dealerList = this.DoubleDealerList;
        dealer = this.DoubleDealer;
        dealerIndex = this.DoubleDealerIndex;
      } else if (level == 3) {
        dealerList = this.StoreDealerList;
        dealer = this.StoreDealer;
        dealerIndex = this.StoreDealerIndex;
      }

      if (!e[0].value || !e[0].label) {
        if (dealerList.length > 0) {
          dealer.value = dealerList[0].Key;
          dealer.label = dealerList[0].Value;
        } else {
          return false;
        }
      } else {
        dealer = e[0];
      }

      dealerIndex = dealerList.findIndex(item => item.Key == dealer.value);

      if (level == 1) {
        this.FirstDealer = dealer;
        this.FirstDealerIndex = dealerIndex;
        this.params.FirstDealerId = dealer.value;

        if (this.showApplyStore || this.showApplyDouble) {
          this.initDoubleDealer(dealer);
          this.StoreDealer = {};
          this.StoreDealerIndex = -1;
          this.StoreDealerList = [];
        }
      } else if (level == 2) {
        this.DoubleDealer = dealer;
        this.DoubleDealerIndex = dealerIndex;
        this.params.DoubleDealerId = dealer.value;

        if (this.showApplyStore) {
          this.initStoreDealer(dealer);
        }
      } else if (level == 3) {
        this.StoreDealer = dealer;
        this.StoreDealerIndex = dealerIndex;

        this.params.StoreDealerId = dealer.value;
      }
    },

    resetSearch() {
      this.FirstDealer = {};
      this.FirstDealerIndex = -1;

      this.DoubleDealer = {};
      this.DoubleDealerIndex = -1;
      this.DoubleDealerList = [];

      this.StoreDealer = {};
      this.StoreDealerIndex = -1;
      this.StoreDealerList = [];

      this.params.FirstDealerId = null;
      this.params.DoubleDealerId = null;
      this.params.StoreDealerId = null;
    },

    getFirstDealerList() {
      this.$u.api
        .getDealerDic({
          Level: 1
        })
        .then(res => {
          const { ResultCode, DealerList } = res;
          if (ResultCode === 1) {
            this.FirstDealerList = DealerList;
          }
        });
    },

    initDoubleDealer(dealer) {
      this.DoubleDealer = {};
      this.DoubleDealerIndex = -1;
      this.DoubleDealerList = [];
      this.getDoubleDealerList(dealer.value);
    },

    initStoreDealer(dealer) {
      this.StoreDealer = {};
      this.StoreDealerIndex = -1;
      this.StoreDealerList = [];
      this.getStoreDealerList(dealer.value);
    },

    getDoubleDealerList(parentId) {
      this.$u.api
        .getDealerDic({
          Level: 2,
          ParentId: parentId
        })
        .then(res => {
          const { ResultCode, DealerList } = res;
          if (ResultCode === 1) {
            this.DoubleDealerList = DealerList;
          }
        });
    },

    getStoreDealerList(parentId) {
      this.$u.api
        .getDealerDic({
          Level: 3,
          ParentId: parentId
        })
        .then(res => {
          const { ResultCode, DealerList } = res;
          if (ResultCode === 1) {
            this.StoreDealerList = DealerList;
          }
        });
    }
  }
};
</script>

<style>
page {
  background-color: #eceaef;
}
</style>

<style lang="scss">
.top-container {
  width: 100%;
  background: url(../../static/images/home/home-top-bg.png) no-repeat;
  height: 142px;
  background-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    margin-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    .info {
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      color: #fff;

      .name {
        font-size: 16px;
        letter-spacing: 4px;
      }
      .status {
        font-size: 12px;
        display: flex;
        position: relative;
        /deep/.u-badge-dot {
          left: 0px;
          top: 7px !important;
        }
        .label-name {
          // margin-left: 12px;
        }
      }
    }
  }
  .right {
    margin-right: 18px;
    image {
      height: 22px;
      width: 22px;
    }
  }
}

.count-grid {
  display: grid;
  margin: -15px 15px 15px 15px;
  background-color: #fff;
  border-radius: 8px;
  // grid-template-columns: repeat(3, 1fr);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .count-item {
    font-size: 12px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .label {
      margin: 3px 0;
      color: #333;
    }
    .label-count {
      color: #ff7624;
    }
  }
}
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 10px;
  margin: 0 15px;
  padding: 10px 0;
  // padding: 5px 15px 25px 15px;
  background-color: #fff;
  border-radius: 8px;
  flex-wrap: wrap;
  .count-item {
    text-align: center;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      width: 52px !important;
      height: 52px !important;
      margin-bottom: 4px;
    }
  }
}

.use-container {
  margin: 0 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 15px;
  text-align: center;
  padding-top: 15px;

  .title {
    font-size: 16px;
    color: #333;
  }
}
.use-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  padding: 14px 20px;
  gap: 10px 10px;
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 0;
    // margin-right: 10px;

    .label {
      margin-top: 8px;
    }
  }
}
</style>
